<template>
  <div class="config-wrapper" v-loading="loading">
    <div class="menu">
      <div class="list-head">下拉配置</div>
      <div class="list">
        <div class="list-item" 
          :class="currentTab == tab.name ? 'item-active' : '' " 
          v-for="tab in tabs" :key="tab.id"
          @click="handleTab(tab)"
          >{{tab.name}}</div>
      </div>
    </div>
    <div class="content">
      <div class="btns">
        <el-button link type="primary" color="#11b9d0"  @click="open">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="itemName" label="名称" />
        <el-table-column prop="itemValue" label="实际内容" />
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button color="#eebe77" plain @click="handleEdit(scope.row)">修改</el-button>
            <el-button color="#ff6662"  plain @click="handleDelete(scope.row)">删除</el-button>
            
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog v-model="centerDialogVisible" destroy-on-close :title="title" width="30%" center>
    <div class="dialog-content">
      <div class="item">
        <div class="label">配置类型</div>
        <div class="content">
          <el-select v-model="distId" class="m-2" placeholder="请选择" size="large">
            <el-option
              v-for="item in tabs"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <div class="item">
        <div class="label">名称</div>
        <div class="content">
          <el-input v-model="itemName" placeholder="请输入" />
        </div>
      </div>
      
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="Save"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import { getConfigListAPi, getAddDetailAPi, getUpdateDetailAPi, getDelDetailAPi } from '../../../api/config'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    name: 'SelectedConfigAll',
      setup() {
        const currentTab = ref('供应商经营性质')
        const Id = ref(501)
        const list = reactive({
          loading: false,
          tabs: [
            {
              name: '供应商经营性质',
              id: 501
            },
            {
              name: '客户类型',
              id: 504
            },
            {
              name: '病历标签',
              id: 505
            },
            {
              name: '患者图片类型',
              id: 506
            },
            {
              name: '随访项目选择',
              id: 512
            },
            {
              name: '患者手机号码 与患者关系',
              id: 518
            },
            {
              name: '患者电话号码 与患者关系',
              id: 519
            },
          ],
          tableData: [],
          centerDialogVisible: false,

          distId: 501,
          itemName: '',
          title: '',
          id: null
        })

        const handleTab = (tab: any) => {
          currentTab.value = tab.name
          Id.value = tab.id
          list.distId = tab.id

          getList()
          
        }

        const getList = async() => {
          list.loading = true
          let res:any = await getConfigListAPi({}, Id.value);
          if(res.code != 0) return ElMessage.error(res.msg)
          res.data && (list.tableData = res.data)

          list.loading = false
        }

        const open = () => {
          list.title = '新增'
          list.centerDialogVisible = true;
        }

        const close = () => {
          list.centerDialogVisible = false
          list.itemName = ''
        }

        const Save = async() => {
          if(list.title === '新增') {
            Add()
          }

          if(list.title === '修改') {
            Edit()
          }
        }

        const Add = async() => {
          let res:any = await getAddDetailAPi({
            distId: list.distId,
            itemName: list.itemName
          })
          if(res.code != 0) return ElMessage.error(res.msg)
          getList()
          close()
          ElMessage.success('添加成功')
          console.log(res)

        }

        const Edit = async() => {
          let res:any = await getUpdateDetailAPi({
            id: list.id,
            itemName: list.itemName
          })
          if(res.code != 0) return ElMessage.error(res.msg)
          getList()
          close()
          ElMessage.success('修改成功')
          console.log(res)
        }

        const Del = async(id: number) => {
          let res:any = await getDelDetailAPi({}, id)
          console.log(res)
          if(res.code != 0) return ElMessage.error('删除成功')
          getList()
          ElMessage.success('删除成功')
        }

        const handleEdit = (rowData: any) => {
          console.log(rowData)
          list.title = '修改'
          let { id, distId, itemName } = rowData;
          list.id = id
          list.distId = distId
          list.itemName = itemName
          list.centerDialogVisible = true
        }

        const handleDelete = (rowData: any) => {
          console.log(rowData)
          let { id }  = rowData;
          ElMessageBox.confirm('此操作将删除该项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            Del(id)
          }).catch(() => {
              ElMessage({
                type: 'info',
                message: '已取消',
              });
          })
        }

        onMounted(() => {
          getList()
        })
        return {
          ...toRefs(list),
          currentTab,
          handleTab,
          open,
          Save,
          handleEdit,
          handleDelete
        }
      }
  };
</script>
<style lang='scss' scoped>
.config-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .menu {
    width: 320px;
    height: 100%;
    // background-color: green;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 10px #f5f5f6, 0 3px 10px #f5f5f6;

    .list-head {
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: bold;
        border-bottom: 2px solid $mainColor;
      }
    .list {
      height: calc(100% - 42px);
      
      
      .list-item {
        padding: 10px 15px;
        border-bottom: 1px solid #f5f5f5;
        cursor: pointer;
      }

      .list-item:hover {
        background-color: #f5f5f5;
        color: $mainColor;
      }

      .item-active {
        font-size: 18px;
        font-weight: bold;
        color: $mainColor;
      }
    }
  }

  .content {
    width: calc(100% - 320px);
    height: 100%;

    .btns {
      height: 40px;
      display: flex;
      margin: 10px 20px;
    }
  }
}
</style>